<template>
	<view class="pages">
		<view
			class="pos-a"
			:style="{
				top: -slideTop + 'px',
				left: 0,
				right: 0,
			}"
			@touchstart="handleTouchstart($event)"
			@touchmove="handleTouchmove($event)"
			@touchend="handleTouchend($event)"
		>
			<view class="w-100" style="height: 80vh; overflow: hidden;">
				<image src="@/static/images/banner_001.png" mode="widthFix" class="w-100 h-auto" />
			</view>
			
			<view class="mar-t-20">
				<view class="flex justify-center">
					<u-icon name="arrow-left-double" size="20" style="transform: rotate(90deg);"></u-icon>
				</view>
				
				<view class="flex justify-center mar-t-10">
					<text>向上滑动进入主页面</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	import { checkLogin, getUserLocation } from '@/utils/lib'
	
	export default {
		computed: {
			...mapState({
				isLogin: state => state.user.isLogin
			})
		},
		
		data() {
			return {
				// 开始滑动初始位置
				startPosition: 0,
				
				// 页面距离顶部的位置
				slideTop: 0,
				
				// 滑动方向（只做个记录，没有功能）
				direction: '',
			}
		},
		
		onLoad() {
			// 刚进入页面时需要用户授权定位，并且获取当前坐标系
			getUserLocation().then(res => {
				this.$store.commit('user/setUserLocation', { longitude: res.longitude, latitude: res.latitude })
			}).catch(err => {
				// Utils.popUpMsg('none', `定位获取失败，部分功能会受限！`, 500)
			})
		},
		
		onShow() {
			checkLogin()
		},
		
		methods: {
			// 监听页面滑动开始
			handleTouchstart(e) {
				this.startPosition = e.touches[0].clientY
			},
			
			// 监听页面滑动
			handleTouchmove(e) {
				let clientY = e.touches[0].clientY
				
				// 只有向上滑动才做处理
				if (this.startPosition > clientY) {
					this.direction = 'top'
					this.slideTop = this.startPosition - clientY
				} else {
					this.direction = 'bottom'
				}
			},
			
			// 监听页面滑动结束
			handleTouchend(e) {
				// 滑动距离超过 50 就让它跳转到主页面
				if (this.slideTop > 50) {
					// 判断是否登录了
					if (this.isLogin) {
						// 如果登录了，跳转到主页面
						uni.redirectTo({
							url: '/pages/index/index'
						})
					} else {
						// 否则，跳转到登陆页面
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}
				}
				
				this.direction = ''
				this.slideTop = 0
				this.startPosition = 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>